<script setup>

import UNavbar from "@/uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {
  fuhexiaoshoudan,
  getguanliyuan,
  getshenchanrenyuan,
  getXiaoshoudan,
  upload,
  xiaoshoudan
} from "../../request/api";
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {BASEURL} from "@/request/request";
// goods 数组 产品信息  [{'name':'产品名称','guige':'规格','baozhuangguige':'包装规格','num':'数量','price':'单价','dingjin':'定金'},{'name':'产品名称','guige':'规格','baozhuangguige':'包装规格','num':'数量','price':'单价','dingjin':'定金'}]
const params = ref({
  mobile: '',
  number: uni.getStorageSync('userinfo').number,
  address: '',
  file: '',
  remark: '',
  goods: [],
  zg_name: '',//复核人姓名
  zg_id: '',
});
const goodsIndex = ref(0);//当前选中的产品
const userinfo = ref(uni.getStorageSync('userinfo'));//用户信息
const adminList = ref([]);
const createList = ref([]);
const orderId = ref(0);//订单ID
const disabled = ref(false);

onLoad((query) => {
  orderId.value = query.id;
  disabled.value = !!query.disabled;
  if (query.id) {
    getInfo();
  }
  getAdmin();
  getCreate();
});
//获取生产员列表
const getCreate = () => {
  getshenchanrenyuan().then(res => {
    createList.value = res.data;
  })
}
//获取管理员列表
const getAdmin = () => {
  getguanliyuan().then(res => {
    adminList.value = res.data;
  })
}
//提交
const handlerSubmit = () => {

  const verify = [
    ['mobile', '请输入客户信息'],
    ['address', '请输入到货地址'],
    ['address', '请输入到货地址'],
    ['remark', '请输入备注'],
    ['zg_id', '请选择管理员'],
  ]
  console.log(params.value)
  for (const [key, msg] of verify) {
    console.log(msg)
    if (!params.value[key]) {
      return uni.showToast({
        title: msg,
        icon: 'none'
      })
    }
  }
  if (!params.value.goods.length) return uni.showToast({
    title: '请添加产品',
    icon: 'none'
  });
  for (const item of params.value.goods) {
    if (!item.num) return uni.showToast({
      title:`请输入${item.name}的吨数`,
      icon:'none'
    })
    if (!item.price) return uni.showToast({
      title:`请输入${item.name}的吨价`,
      icon:'none'
    })
  }

  if (!params.value.sc_name && orderId.value) return uni.showToast({
    title: '请选择生产人员',
    icon: 'none'
  });
  // console.log(params.value)
  if (!orderId.value) {
    add();
  } else {
    check();
  }
}
//选择管理员
const createChange = ({detail: {value}}) => {
  let item = createList.value[value];
  params.value.sc_name = item.name;
  params.value.sc_id = item.id;
}
//选择管理员
const adminChange = ({detail: {value}}) => {
  let item = adminList.value[value];
  params.value.zg_name = item.name;
  params.value.zg_id = item.id;
}
//添加产品
const handlerAddProduct = () => {
  params.value.goods.push({
    name: '产品' + (params.value.goods.length + 1),
    baozhuangguige: "",
    dingjin: "",
    guige: "",
    num: "",
    price: "",
    file: ""
  });
  goodsIndex.value = params.value.goods.length - 1;

}
const check = () => {
  fuhexiaoshoudan({...params.value, id: orderId.value}).then(res => {
    uni.showToast({
      title: '提交成功',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000)
  })
}
const add = () => {
  xiaoshoudan({...params.value}).then(res => {
    uni.showToast({
      title: '提交成功',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1000)
  })
}
//获取销售单西南西
const getInfo = () => {
  getXiaoshoudan({
    id: orderId.value
  }).then(res => {
    params.value = {...res.data};
  })
}
//选择文件
const chooseFile = () => {
  uni.chooseImage({
    count: 1,
    async success({tempFilePaths}) {
      params.value.goods[goodsIndex.value].file = await upload(tempFilePaths[0]);
    }
  })
}
const prevImage = () => {
  uni.previewImage({
    current: 0,
    urls: [BASEURL + params.value.goods[goodsIndex.value].file]
  })
}
</script>
<template>
  <view class="sales-order-page">
    <u-navbar placeholder :title="orderId?disabled?'查看销售单':'复核销售单':'填写销售单'"></u-navbar>
    <scroll-view scroll-y class="scroll-y">
      <view class="content">
        <view class="input-item">
          <text>销售经理</text>
          <view class="input">
            <input :value="params.number" disabled type="text" placeholder="请输入销售经理"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view class="input-item">
          <text>客户信息</text>
          <view class="input">
            <input type="text" v-model="params.mobile" placeholder="请输入客户姓名/电话"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view class="input-item">
          <text>到货地址</text>
          <view class="input">
            <input v-model="params.address" type="text" placeholder="请输入到货地址"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view class="add-products">
          <text>产品信息</text>
          <view v-if="!disabled" @click="handlerAddProduct">
            <image src="/static/add.png"></image>
            <text>添加产品</text>
          </view>
        </view>
        <view class="products-list">
          <text v-if="!params.goods.length">未添加产品</text>
          <view :class="{
            active:index===goodsIndex
          }" @click.stop="goodsIndex = index" v-for="(item,index) of params.goods" :key="index">
            <image v-if="!disabled" @click.stop="()=>{
              goodsIndex = 0;
              params.goods.splice(index,1);
            }" src="/static/del.png"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-if="params.goods.length" class="input-item">
          <text>产品名称</text>
          <view class="input">
            <input v-model="params.goods[goodsIndex].name" type="text" placeholder="请输入产品名称"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view v-if="params.goods.length" class="input-item">
          <text>产品规格</text>
          <view class="input">
            <input v-model="params.goods[goodsIndex].guige" type="text" placeholder="请输入产品规格"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
        <view v-if="params.goods.length" class="input-item">
          <text>包装规格</text>
          <view class="input">
            <input v-model="params.goods[goodsIndex].baozhuangguige" type="text" placeholder="请输入包装规格"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
            <!--            <text>KG</text>-->
          </view>
        </view>
        <view style="display: flex;align-items: center;">
          <view v-if="params.goods.length" class="input-item">
            <text>产品吨数</text>
            <view class="input">
              <input v-model="params.goods[goodsIndex].num" type="digit" placeholder="请输入产品吨数"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
            </view>
          </view>
          <view v-if="params.goods.length" class="input-item">
            <text>产品吨价</text>
            <view class="input">
              <input v-model="params.goods[goodsIndex].price" type="digit" placeholder="请输入产品吨价"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
            </view>
          </view>
        </view>
        <view style="display: flex;align-items: center;">
          <view v-if="params.goods.length" class="input-item">
            <text>产品箱数（选填）</text>
            <view class="input">
              <input v-model="params.goods[goodsIndex].num1" type="number" placeholder="请输入产品箱数"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
            </view>
          </view>
          <view v-if="params.goods.length" class="input-item">
            <text>产品箱价（选填）</text>
            <view class="input">
              <input v-model="params.goods[goodsIndex].price1" type="digit" placeholder="请输入产品箱价"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
            </view>
          </view>
        </view>
        <view v-if="params.goods.length" class="input-item">
          <text>产品定金</text>
          <view class="input">
            <input v-model="params.goods[goodsIndex].dingjin" type="digit" placeholder="请输入产品定价"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
          </view>
        </view>
<!--        <view v-if="params.goods.length" class="input-item">
          <text>包装规格总重量</text>
          <view class="input">
            <input v-model="params.goods[goodsIndex].weight" type="digit" placeholder="请输入总重量"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
            <text>吨</text>
          </view>
        </view>-->
        <view class="null"></view>
        <view v-if="!orderId && params.goods.length" @click="chooseFile" class="input-item">
          <text>附件</text>
          <view v-if="!params.goods[goodsIndex]?.file" class="input">
            <input type="text" disabled :value="params.file ?'已选择':''" placeholder="请上传附件"
                   placeholder-style="color:rgba(176, 183, 191, 1);">
            <image class="upload" src="/static/upload.png"></image>
          </view>
          <view v-else>
            <image :src="BASEURL+params.goods[goodsIndex].file" style="width: 100%;" mode="aspectFill"></image>
          </view>
        </view>
        <view v-if="orderId" @click="prevImage" class="input-item">
          <text>附件</text>
          <view>
            <image :src="BASEURL+params.goods[goodsIndex].file" style="width: 100%;" mode="aspectFill"></image>
          </view>
        </view>
        <view class="input-item">
          <text>备注</text>
          <view class="input">
            <textarea v-model="params.remark" type="text" placeholder="请输入备注"
                      placeholder-style="color:rgba(176, 183, 191, 1);"></textarea>
          </view>
        </view>
        <view v-if="!orderId || (disabled && params.zg_id)" class="input-item">
          <text>指定管理员</text>
          <picker :range="adminList" range-key="name" @change="adminChange">
            <view class="input">
              <input :value="params.zg_name" disabled type="text" placeholder="选择管理员"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
              <image class="upload" src="/static/down.png"></image>
            </view>
          </picker>

        </view>
        <view v-if="(orderId && !disabled) || (disabled && params.sc_id)" class="input-item">
          <text>指定生产人员</text>
          <picker :range="createList" range-key="name" @change="createChange">
            <view class="input">
              <input :value="params.sc_name" disabled type="text" placeholder="选择生产人员"
                     placeholder-style="color:rgba(176, 183, 191, 1);">
              <image class="upload" src="/static/down.png"></image>
            </view>
          </picker>

        </view>
        <view v-if="!disabled" class="submit" @click="handlerSubmit">确认提交</view>
      </view>
    </scroll-view>
  </view>
</template>


<style scoped lang="scss">
.sales-order-page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .content {
    padding: 50rpx 0 30rpx 0;
    display: flex;
    background-color: #fff;
    flex-direction: column;
    align-items: center;

    .submit {
      width: 597rpx;
      height: 96rpx;
      background: #3563FF;
      border-radius: 48rpx;
      margin-top: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
      line-height: 36rpx;
    }

    .null {
      border-top: 16rpx solid rgba(245, 245, 245, 1);
      height: 58rpx;
    }

    .products-list {
      padding: 30rpx 30rpx 40rpx 30rpx;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      gap: 26rpx;

      > view {
        padding: 0 40rpx;
        height: 72rpx;
        background: #FFFFFF;
        border-radius: 36rpx;
        border: 1px solid #3563FF;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;

        &.active {
          background: #3563FF;

          text {
            color: #fff;
          }
        }

        image {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          top: -11rpx;
          right: 0;
        }

        text {
          font-weight: 500;
          font-size: 24rpx;
          color: #3563FF;
        }
      }
    }

    .add-products {
      width: 100%;
      height: 86rpx;
      background: #F5F5F5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30rpx;

      view {
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        text {
          font-weight: 500;
          font-size: 28rpx;
          color: #0F161E;
        }
      }

      > text {
        font-weight: 500;
        font-size: 28rpx;
        color: #0F161E;
      }
    }

    .input-item {
      width: 100%;
      padding: 0 30rpx 56rpx 30rpx;
      display: flex;
      flex-direction: column;

      .input {
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 96rpx;
        background: #F5F6FA;
        border-radius: 12rpx 10rpx 10rpx 10rpx;

        .upload {
          width: 40rpx;
          height: 40rpx;
          margin-left: 30rpx;
        }

        .down {
          width: 10rpx;
          height: 10rpx;
          margin-left: 30rpx;
        }
        textarea{
          height: 200rpx;
          padding: 30rpx 0;
        }
        input ,textarea{
          flex-grow: 1;
          font-weight: 400;
          display: flex;
          font-size: 28rpx;
          color: #333333;
        }
      }

      > text {
        font-weight: 500;
        margin-bottom: 23rpx;
        font-size: 28rpx;
        color: #0F161E;
      }
    }
  }

}
</style>
